<template>
    <div class="laojiuxiaoqu-shujutongji  mg-t-30">
        <div class="flex">
            <div class="card">
                <p>{{ zongLiang.num }}</p>
                <p>案件采集量(件)</p>
            </div>
            <ul class="list">
                <li v-for="(item, index) in TongJiShuJu.orderNumList" :key="`tongji-${index}`">
                    <span>{{ item.title }}</span>
                    <span>{{ item.num }}</span>
                    <span style="margin-left: 5px;">件</span>
                </li>
            </ul>
        </div>

        <div class="grid">
            <div>
                <p>{{ TongJiShuJu.oldCommInfo.totalMakeoverNum }}</p>
                <span>小区改造总个数</span>
            </div>
            <div>
                <p>{{ TongJiShuJu.oldCommInfo.totalCompletionNum }}</p>
                <span>已完工总数(个)</span>
            </div>
            <div>
                <p>{{ TongJiShuJu.oldCommInfo.totalUnfinishedNum }}</p>
                <span>未完工总数(个)</span>
            </div>
            <div>
                <p>{{ TongJiShuJu.oldCommInfo.totalHouseholdNum }}</p>
                <span>受益户数(万户)</span>
            </div>
            <div>
                <p>{{ TongJiShuJu.oldCommInfo.totalArea }}</p>
                <span>建筑面积(万㎡)</span>
            </div>
        </div>

    </div>
</template>

<script>
import { LaoJiuXiaoQuDB } from '@/api'
export default {
    data() {
        return {
            TongJiShuJu: {
                orderNumList: [],
                oldCommInfo: {},
            },
            zongLiang: {},
        }
    },
    created() {
        LaoJiuXiaoQuDB.getTonjiShuJu().then(res => {
            const arr = []
            this.TongJiShuJu.oldCommInfo = res.data.oldCommInfo;
            res.data.orderNumList.forEach((item, index) => {
                if (index == 2) {
                    this.zongLiang = item;
                    return;
                }
                arr.push(item);
            })
            this.TongJiShuJu.orderNumList = arr.sort((a,b) => a.sort-b.sort);
        });
    },
}
</script>

<style lang="less" scoped>
.laojiuxiaoqu-shujutongji {
    .card {
        width: 254px;
        height: 123px;
        background: url(../../../assets/images/laojiuxiaoqu/card.png) no-repeat 0 0;
        text-align: center;

        p:first-child {
            font-size: 30px;
            font-family: "JingDianYaHei";
            font-weight: bold;
            color: #0ECEFF;
            margin: 20px 0;
        }

        p:last-child {
            font-size: 15px;
            color: #EFF0F1;
        }
    }

    .list {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 30px;

        li {
            position: relative;
            padding-left: 30px;
            font-size: 16px;
            color: #FFFFFF;
            display: flex;
            align-items: flex-end;

            &:after {
                content: '';
                display: block;
                position: absolute;
                width: 23px;
                height: 3px;
                border: 3px solid;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                transform: rotate(90deg);
            }

            &:nth-child(1)::after {
                border-color: transparent transparent rgba(44, 97, 255, 1) transparent;
            }

            &:nth-child(2)::after {
                border-color: transparent transparent rgba(53, 207, 232, 1) transparent;
            }

            &:nth-child(3)::after {
                border-color: transparent transparent rgba(177, 26, 196, 1) transparent;
            }

            span:nth-child(1) {
                width: 110px;
            }

            span:nth-child(2) {
                /*width: 30px;*/
                font-family: 'ShiShangZhongHeiJianTi';
                top: 2px;
                position: relative;
            }

            span:nth-child(3) {
                font-size: 12px;
            }

            &:nth-child(1) span:nth-child(2) {
                color: rgba(44, 97, 255, 1);
            }

            &:nth-child(2) span:nth-child(2) {
                color: rgba(53, 207, 232, 1);
            }

            &:nth-child(3) span:nth-child(2) {
                color: rgba(177, 26, 196, 1);
            }


        }
    }

    .grid {
        display: grid;
        grid-template-columns: 159px 143px 143px;
        grid-template-rows: 77px 77px;
        grid-gap: 10px;
        margin-top: 40px;
        font-family: "JingDianYaHei";
        text-align: center;

        span {
            color: #fff;
            font-size: 14px;
            font-family: "微软雅黑";
            flex: 1;
            align-items: center;
            display: flex;
            justify-content: center;
        }

        >div:not(:first-child) p {
            height: 53px;
            display: flex;
            align-items: center;
            display: flex;
            justify-content: center;
            font-size: 24px;
        }

        >div {
            display: flex;
            flex-direction: column;
        }

        >div:nth-child(1) {
            grid-row: span 2 / auto;
            width: 159px;
            height: 164px;
            background: url(../../../assets/images/laojiuxiaoqu/grid-1.png) no-repeat 0 0;

            p {
                height: 100px;
                line-height: 100px;
                font-size: 30px;
                line-height: 100px;
                color: rgba(53, 207, 232, 1);
            }
        }


        >div:nth-child(2) {
            background: url(../../../assets/images/laojiuxiaoqu/grid-2.png) no-repeat 0 0;

            p {
                color: rgba(0, 222, 42, 1)
            }
        }

        >div:nth-child(3) {
            background: url(../../../assets/images/laojiuxiaoqu/grid-3.png) no-repeat 0 0;

            p {
                color: rgba(255, 37, 37, 1)
            }
        }

        >div:nth-child(4) {
            background: url(../../../assets/images/laojiuxiaoqu/grid-4.png) no-repeat 0 0;

            p {
                color: rgba(29, 142, 217, 1)
            }
        }

        >div:nth-child(5) {
            background: url(../../../assets/images/laojiuxiaoqu/grid-5.png) no-repeat 0 0;

            p {
                color: rgba(210, 162, 34, 1)
            }
        }
    }
}
</style>